<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>history</title>
    <style>
		  a[href] {
			  display: block;
			}
    </style>
  </head>
  <body>
	  <p>浏览器的历史 没办法删除的, 想要更细腻的操作, 只能自己维护一个历史堆栈</p>
		<a href="layout.html">layout.html</a>
		<a href="http://www.baidu.com">baidu</a>
		<p>浏览器针对每个页面维护一个History栈。执行pushState函数可压入设定的url至栈顶，同时修改当前指针；
		当执行back操作时，history栈大小并不会改变（history.length不变），仅仅移动当前指针的位置；
		若当前指针在history栈的中间位置（非栈顶），此时执行pushState会改变history栈的大小。</p>
		<p>pushState(), url会改变, 但页面本身不会跳转</p>
		<p>back()与forward()都会触发popstate事件</p>
		<script>
		  window.addEventListener('popstate', function(e){
			  console.log(e)
			})
			console.log('from history')
		</script>
  </body>
</html>
